<template>
  <div v-loading="loading">
    <div class="content-header">
      <span>密码规则设置</span>
      <el-button
        type="primary"
        @click="save">保存</el-button>
    </div>
    <reminder content="当设置变更时，会通过系统提醒员工修改为符合要求的密码。如员工未修改，则下次登录时会强制要求修改。请谨慎修改！" />
    <div class="content-body">
      <div class="rule-list">
        <div v-for="(item, index) in ruleList" :key="index" class="rule-item">
          <div class="rule-label">
            {{ item.label }}
            <template v-if="['pwdValidPeriod', 'enforcePwdHistory'].includes(item.field)">
              <el-tooltip class="item" effect="dark" placement="top-start">
                <div slot="content">{{ item.tooltip }}</div>
                <i class="wk wk-icon-fill-help wk-help-tips" />
              </el-tooltip>
            </template>
          </div>
          <el-select
            v-model="form[item.field]"
            class="el-select"
            placeholder="请选择">
            <el-option
              v-for="sitem in options[item.field]"
              :key="sitem.value"
              :label="sitem.label"
              :value="sitem.value" />
          </el-select>
          <span v-if="item.field === 'pwdErrorNum'" style="margin-left: 10px;">次后锁定账户5分钟</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  enterpriseSecurityConfigQueryAPI,
  enterpriseSecurityConfigSaveAPI
} from '@/api/admin/enterpriseSecuritySetting'

import Reminder from '@/components/Reminder'

export default {
  // 密码规则设置
  name: 'PasswordRuleSetting',

  components: {
    Reminder
  },

  data() {
    return {
      loading: false, // 展示加载中效果

      form: {},
      ruleList: [
        { label: '密码有效期', field: 'pwdValidPeriod', tooltip: '开始时间为密码有效期设置的时间' },
        { label: '强制密码历史', field: 'enforcePwdHistory', tooltip: '是否允许用户的新密码与设置过的历史密码相同。如果设置了历史密码的具体个数，则新密码不能与前5次的这些密码相同。' },
        { label: '最小密码长度', field: 'minimumPwdLen' },
        { label: '字符要求', field: 'pwdCharRequire' },
        { label: '密码输入错误', field: 'pwdErrorNum' },
        { label: '修改密码登出规则', field: 'changePwdRule' }
      ],
      options: {
        pwdValidPeriod: [
          { label: '永不过期', value: 2147483647 },
          { label: '30天', value: 30 },
          { label: '60天', value: 60 },
          { label: '90天', value: 90 },
          { label: '120天', value: 120 },
          { label: '180天', value: 180 },
          { label: '365天', value: 365 }
        ],
        enforcePwdHistory: [
          { label: '不记住密码', value: 0 },
          { label: '记住1个密码', value: 1 },
          { label: '记住2个密码', value: 2 },
          { label: '记住3个密码', value: 3 },
          { label: '记住4个密码', value: 4 },
          { label: '记住5个密码', value: 5 },
          { label: '记住6个密码', value: 6 },
          { label: '记住7个密码', value: 7 },
          { label: '记住8个密码', value: 8 },
          { label: '记住9个密码', value: 9 },
          { label: '记住10个密码', value: 10 }
        ],
        minimumPwdLen: [
          { label: '6', value: 6 },
          { label: '7', value: 7 },
          { label: '8', value: 8 },
          { label: '9', value: 9 },
          { label: '10', value: 10 },
          { label: '11', value: 11 },
          { label: '12', value: 12 },
          { label: '13', value: 13 },
          { label: '14', value: 14 },
          { label: '15', value: 15 },
          { label: '16', value: 16 }
        ],
        pwdCharRequire: [
          { label: '不限', value: 0 },
          { label: '必须包含字母+数字字符', value: 1 },
          { label: '必须包含大写字母+小写字母+数字组合', value: 2 },
          { label: '必须包含字母+特殊字符+数字组合', value: 3 },
          { label: '必须包含大写字母+小写字母+特殊字符+数字组合', value: 4 }
        ],
        pwdErrorNum: [
          { label: '不限', value: 2147483647 },
          { label: '3', value: 3 },
          { label: '4', value: 4 },
          { label: '5', value: 5 },
          { label: '6', value: 6 }
        ],
        changePwdRule: [
          { label: '退出登录其他设备', value: 1 },
          { label: '不退出登录其他设备', value: 2 }
        ]
      },

      configId: null
    }
  },

  created() {
    for (const item of this.ruleList) {
      this.form[item.field] = this.options[item.field][0].value
    }
    this.queryConfig()
  },

  methods: {
    /**
     * @description: 查询密码规则
     * @return {*}
     */
    queryConfig() {
      this.loading = true
      const params = {
        type: 1 // 密码规则
      }
      enterpriseSecurityConfigQueryAPI(params).then(res => {
        const {
          pwdValidPeriod = 2147483647,
          enforcePwdHistory = 0,
          minimumPwdLen = 6,
          pwdCharRequire = 0,
          pwdErrorNum = 2147483647,
          changePwdRule = 1,
          configId
        } = res.data || {}
        this.form = {
          pwdValidPeriod,
          enforcePwdHistory,
          minimumPwdLen,
          pwdCharRequire,
          pwdErrorNum,
          changePwdRule
        }
        this.configId = configId
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    },

    /**
     * 保存操作
     */
    save() {
      this.$confirm('密码规则变更时，会通过系统提醒员工修改为符合要求的密码。如员工未修改，则下次登录时会强制要求修改。请谨慎修改！', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.loading = true
        const params = {
          configType: 1,
          ...this.form
        }

        if (this.configId) {
          params.configId = this.configId
        }

        enterpriseSecurityConfigSaveAPI(params)
          .then(res => {
            this.loading = false
            this.$message.success('操作成功')
          })
          .catch(() => {
            this.loading = false
          })
      }).catch(() => {})
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "./index.scss";

.rule-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 20px;

  .rule-label {
    display: flex;
    justify-content: space-between;
    width: 120px;
    margin-right: 40px;
  }

  .el-select {
    width: 376px;
  }
}
</style>

